<template>
    <div class="vip">
        <div class="top-img">
            <img src="./activity-img/cb9e39783f.png"/>
        </div>
        <div class="vip-365">365元全年免费看，日均仅花1元</div>
        <a class="kaitong" :href="productUrl(5)">开通VIP</a>
        <div class="vip-bottom">VIP属于虚拟商品，一经购买不得退款</div>
    </div>
</template>

<script>
    export default {
        name: "vip",
        data(){
            return{
                successUrl:encodeURIComponent( 'http://'+document.domain+'/my'),
            }
        },
        created:function () {
            this.set()
        },
        methods:{
            set:function(){
                this.$emit('set','hide')
            },
            productUrl(id) {
                let url = `/buy?ProductID=`+id+
                    `&SuccessRedirect=`+this.successUrl+
                    `&FailedRedirect=`+this.successUrl;
                return this.$axios.defaults.linkUrl(url);
            }
        }
    }
</script>

<style scoped>
    .vip{
        width: 100%;
        height: 100vh;
        background: url("./activity-img/f417ca502a.jpg");
        background-size: cover;
    }
    .top-img{
        padding-top: 20px;
    }
    .top-img img{
        width: 100%;
    }
    .vip-365{
        margin: 20px auto;
        width: 62%;
        color: #ffe900;
        border: 1px solid #ffe900;
        border-radius: 5px;
        text-align: center;
        padding: 9px 0px;
        letter-spacing: 1px;
        font-size: 0.9rem;
    }
    .kaitong{
        display: block;
        margin: 30px auto 10px;
        width: 64%;
        text-align: center;
        padding: 10px 0px;
        background: #ff9f00;
        color: white;
        font-size: 1.1rem;
        font-weight: bold;
        border-radius: 20px;
        text-decoration: none;
    }
    .vip-bottom{
        color: #fff;
        text-align: center;
        font-size: 0.9rem;
    }
    @media (max-height: 550px) {
        .vip {
            height: 100%;
        }
        .vip-bottom{
            margin-bottom: 20px;
        }
    }
</style>
